<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>权限管理——元素管理</title>
</head>
<link href="/pages/common/layui/css/layui.css" rel="stylesheet" media="all"/>
<link href="/pages/console/bootstrap-treegrid/dist/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/pages/console/bootstrap-treegrid/dist/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />

<style>
    .layui-form-label {
        width: 86px;
    }
</style>
<body>
<div class="layui-row">
    <div class="layui-col-md1">&nbsp;</div>
    <input id="pageCount" type="" name="" style="display: none">
    <div id="user_table" class="layui-card" style="margin-top: 1%">
        <div class="layui-card-header"><p id="title" >交互元素列表</p></div>
        <div class="layui-card-body" style="width:1405px;margin: auto;" id="roleTable_list">
            <button class="layui-btn layui-btn-sm" onclick="info.addResource()" id="add_role_btn">添加元素</button>
            <table id="resource_table"></table>

            <!-- 编辑元素操作 -->
            <form id="update_resource" style="display:none;">

                <div class="layui-form-item">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-block">
                        <input type="text"  id="resourceId" readonly lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">元素名称</label>
                    <div class="layui-input-block">
                        <input type="text"  id="resourceNameUp" placeholder="请输入元素名称" lay-verify="required" autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">元素路径</label>
                    <div class="layui-input-block">
                        <input type="text"  id="resourceUrlUp" placeholder="请输入元素路径" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">元素权限</label>
                    <div class="layui-input-block">
                        <input type="text"  id="resourceAuthUp" placeholder="请输入元素权限" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">元素类型</label>
                    <div id="resourceTypeUp" class="layui-input-block">
                        <select id="resourceTyepUp" style="height: 39px;width: 17%;border: 1px solid;border-color: #D2D2D2!important;">
                            <option value="">请选择元素类型</option>
                            <option value="0">按钮</option>
                            <option value="1">菜单</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select id="resourceStatusUp"  name="resourceStatusUp" style="height: 39px;width: 17%;border: 1px solid;border-color: #D2D2D2!important;" >
                            <option value="">请选择角色状态</option>
                            <option value="1">使用</option>
                            <option value="-1">禁用</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block" style="">
                        <a class="layui-btn" id="resource_from_update" style="margin-bottom: 10px;">确认修改</a>
                        <a class="layui-btn layui-btn-primary back" style="margin-bottom: 10px;">返回</a>
                    </div>
                </div>
            </form>


            <!-- 添加元素操作 -->
            <form class="layui-form" id="add_resource" style="display:none;">

                <div class="layui-form-item">
                    <label class="layui-form-label">元素名称</label>
                    <div class="layui-input-block">
                        <input type="text"  id="resourceName" placeholder="请输入元素名称" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">元素路径</label>
                    <div class="layui-input-block">
                        <input type="text"  id="resourceUrl" placeholder="请输入元素路径" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">元素权限</label>
                    <div class="layui-input-block">
                        <input type="text"  id="resourceAuth" placeholder="请输入元素权限" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">元素类型</label>
                    <div class="layui-input-block">
                        <select id="resourceType"  name="selects" >
                            <option value="">请选择元素类型</option>
                            <option value="0">按钮</option>
                            <option value="1">菜单</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select id="resourceStatus"  name="selects" >
                            <option value="">请选择元素状态</option>
                            <option value="1">使用</option>
                            <option value="-1">禁用</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block" style="">
                        <a class="layui-btn" id="resource_from_add" style="margin-bottom: 10px;">确认添加</a>
                        <a class="layui-btn layui-btn-primary back" style="margin-bottom: 10px;">返回</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<script src="/pages/console/bootstrap-treegrid/dist/jquery/jquery-1.11.3.min.js"></script>
<script src="/pages/console/bootstrap-treegrid/dist/bootstrap/js/bootstrap.min.js"></script>
<script src="/pages/console/bootstrap-treegrid/dist/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/pages/console/bootstrap-treegrid/dist/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/pages/console/bootstrap-treegrid/src/bootstrap-treegrid.js"></script>
<script type="text/javascript" src="/pages/common/jquery/jquery.md5.js"></script>
<script type="text/javascript" src="/pages/console/js/common.js"></script>
<script type="text/javascript" src="/pages/common/layui/layui.all.js"></script>
<script type="text/javascript" src="/pages/console/js/authorityManagement.js"></script>
<script type="text/javascript" src="/pages/console/js/resourceManage.js"></script>

<script>
    var datas = [];
	$(function () {
        $("#resource_table").show();
        $("#update_resource").hide();
        $("#add_role_btn").show()
        $("#add_resource").hide();

        //返回按钮
        $(".back").click(function () {
            $('#title').empty();
            $("#title").append("元素列表");
            $("#resource_table").show();
            $("#update_resource").hide();
            $(".bootstrap-table").show();
            $("#add_role_btn").show();
            $("#add_resource").hide();
        })

        //获取表单数据
        $.ajax({
            url: request('/console/queryResourceInfo'),
            success: function (d) {
                if (d) {
                    datas = d.data;
                    // 初始化表格
                    initTable();
                }
            }
        });

        function initTable() {
            $('#resource_table').bootstrapTable({
                //method: 'post',
                //url: '/HR/HrDept/GetList',
                data: datas,
                singleSelect: true,//单行选择
                clickToSelect: true,//点击行时自动选择
                striped: true,//是否显示行间隔色
                treeView: true,//是否显示树形视图
                treeId: "id",//定义关键字段来标识树节点
                treeField: "resourceName",//定义树节点字段
                treeParentId: "pid", //定义父级ID字段
                treeRootLevel: 1,//树根的级别
                treeCollapseAll: true,//是否全部折叠，默认折叠
                cascadeCheck: false,//是否层叠选中状态(选中父级，子级全部选中) true=层叠选中，需要singleSelect: false；false=不是层叠选中
                uniqueId: "DeptID", //每一行的唯一标识，一般为主键列
                columns:
                    [
                        {field: 'resourceName', title: '元素名称', width: 180},
                        {field: 'resourceUrl', title: '元素路径', width: 180},
                        {field: 'resourceAuth', title: '元素权限', width: 180,formatter:function (value, row, index) {
                                if (row.isView == 1){
                                    return "";
                                }else{
                                    return  row.resourceAuth;
                                }
                            }},
                        {field: 'type', title: '元素类型', width: 180, formatter:function (value, row, index) { if (row.isView == 1){return "";}else if (row.type == 0){return "按钮";}else{return "菜单";}}},
                        {field: 'status', title: '状态', width: 200,formatter:function(value,row,index){if (row.isView == 1){return "";}else if(row.status == 1){return "使用"}else{return "禁用"}}},
                        {
                            field: 'right', title: '操作', formatter: function (value, row, index) {
                                if (row.isView == 1){
                                    return "";
                                }else{
                                    return '<span class="layui-btn layui-btn-xs layui-btn-primary" ' + 'onclick="info.updateResource(\'' + row.id + '\',\'' + row.pid  + '\')">编辑</span>' +
                                        '<span class="layui-btn layui-btn-xs layui-btn-danger" ' + 'onclick="info.deleteResource(\'' + row.id + '\',\'' + index  + '\')">删除</span>'+
                                        '<span class="layui-btn layui-btn-xs layui-btn-primary" ' + 'onclick="info.addPidResource(\'' + row.id + '\')">添加子元素</span>' ;
                                }
                            }
                        }
                    ]
            });
        }
	});


	$(function () {
        //添加元素表单提交
        $("#resource_from_add").click(function () {
            var resourceName = $("#resourceName").val();
            if (resourceName === ""){
                layer.msg('元素名称不能为空！', {icon: 5});
                return;
            }
            var resourceUrl = $("#resourceUrl").val();
            if (resourceUrl === ""){
                layer.msg('元素路径不能为空！', {icon: 5});
                return;
            }
            var resourceAuth = $("#resourceAuth").val();

            var resourceType = $("#resourceType").val();
            if (resourceType === ""){
                layer.msg('请选择元素类型！', {icon: 5});
                return;
            }
            var resourceStatus = $("#resourceStatus").val();
            if (resourceStatus === ""){
                layer.msg('请选择元素状态！', {icon: 5});
                return;
            }
            var pid = localStorage.getItem("add_resource_pid");
            $.ajax({
                type:"POST",
                url:request("/console/addResourceInfo"),
                data:{
                    resourceName:resourceName,
                    resourceUrl:resourceUrl,
                    resourceAuth:resourceAuth,
                    type: resourceType,
                    status:resourceStatus,
                    pid:pid
                },
                dataType:'json',
                async:false,
                success:function(result){
                    localStorage.setItem("add_resource_pid","");
                    if(result.resultCode==1){
                        layer.msg("添加成功!",{"icon":1});
                        setTimeout(function(){
                            window.location.href="/pages/console/resourceManage.html";
                        }, 1500);
                    }else {
                        layer.msg(result.resultMsg,{"icon":5});
                    }
                }
            })

        })

        //修改表单提交
        $("#resource_from_update").click(function () {
            var resourceName = $("#resourceNameUp").val();
            if (resourceName === ""){
                layer.msg('元素名称不能为空！', {icon: 5});
                return;
            }
            var resourceUrl = $("#resourceUrlUp").val();
            if (resourceUrl === ""){
                layer.msg('元素路径不能为空！', {icon: 5});
                return;
            }
            var resourceAuth = $("#resourceAuthUp").val();

            var resourceType = $("#resourceTyepUp").val();
            if (resourceType === ""){
                layer.msg('请选择元素类型！', {icon: 5});
                return;
            }
            var resourceStatus = $("#resourceStatusUp").val();
            if (resourceStatus === ""){
                layer.msg('请选择元素状态！', {icon: 5});
                return;
            }
            var pid = localStorage.getItem("add_resource_pid");
            $.ajax({
                type:"POST",
                url:request("/console/updateResourceInfo"),
                data:{
                    resourceId:localStorage.getItem("update_respirce_id"),
                    resourceName:resourceName,
                    resourceUrl:resourceUrl,
                    resourceAuth:resourceAuth,
                    type: resourceType,
                    status:resourceStatus,
                    pid:localStorage.getItem("update_respirce_pid")
                },
                dataType:'json',
                async:false,
                success:function(result){
                    localStorage.setItem("add_resource_pid","");
                    if(result.resultCode==1){
                        layer.msg("添加成功!",{"icon":1});
                        setTimeout(function(){
                            window.location.href="/pages/console/resourceManage.html";
                        }, 1500);
                    }else {
                        layer.msg(result.resultMsg,{"icon":5});
                    }
                }
            })
        })


    })



var info={
	//修改元素
    updateResource:function (id,pid) {
        localStorage.setItem("update_respirce_id",id);
        localStorage.setItem("update_respirce_pid",pid);
        $.ajax({
            type:"POST",
            url:request("/console/queryResourceInfoById"),
            data:{
                id:id
            },
            dataType:'json',
            async:false,
            success:function(result){
                if(result.resultCode==1){
                    $("#resourceId").val(result.data.id);
                    $("#resourceNameUp").val(result.data.resourceName);
                    $("#resourceUrlUp").val(result.data.resourceUrl);
                    $("#resourceAuthUp").val(result.data.resourceAuth);
                    $("#resourceTyepUp").find("option[name='"+result.data.type+"']").attr("selected",true);
                    $("#resourceTyepUp").val(result.data.type);

                    $("#resourceStatusUp").val(result.data.status);
                }
            }
        })

        $('#title').empty();
        $("#title").append("编辑元素");
        $("#resource_table").hide();
        $("#update_resource").show();
        $(".bootstrap-table").hide();
        $("#add_role_btn").hide();
        $("#add_resource").hide();

    }
    //添加元素
    ,addResource:function () {
        $('#title').empty();
        $("#title").append("添加元素");
        $("#resource_table").hide();
        $("#update_resource").hide();
        $(".bootstrap-table").hide();
        $("#add_role_btn").hide();
        $("#add_resource").show();
    }
    //添加子元素
    ,addPidResource:function (id) {
        localStorage.setItem("add_resource_pid",id);
        $('#title').empty();
        $("#title").append("添加子元素");
        $("#resource_table").hide();
        $("#update_resource").hide();
        $(".bootstrap-table").hide();
        $("#add_role_btn").hide();
        $("#add_resource").show();
    }
    //删除元素
    ,deleteResource:function (id,tablesIndex) {

        layer.confirm('确认要删除吗？', {
            btn : [ '确定', '取消' ]
        }, function(index) {
            $.ajax({
                type:"POST",
                url:request("/console/delResourceInfo"),
                data:{
                    id:id
                },
                dataType:'json',
                async:false,
                success:function(result){
                    if(result.resultCode==1){
                        layer.msg("删除成功!", {icon: 1});

                        let tableList = $('#resource_table tr');
                        for (let i = 0; i <tableList.length; i++){
                            console.log(tableList[i].getAttribute('data-index') , tablesIndex);
                            if (tableList[i].getAttribute('data-index') === tablesIndex){
                                $('#resource_table tr')[i].remove();
                            }
                        }

                        setTimeout(function(){
                            window.location.href="/pages/console/resourceManage.html";
                        }, 1500);
                    }else{
                        layer.msg(result.resultMsg, {icon: 2});
                    }

                }
            })
        });
    }
}
</script>

</body>
</html>